<template>
  <view class="content">
    <u-upload
        :fileList="fileList1"
        @onUploaded="onUploaded"
        @on-remove="remove"
        :auto-upload="true"
        action="/api/file/upload"
        name="file"
        multiple
        :maxCount="1"
    ></u-upload>
    <u-form :model="form" ref="form1" class="content">

      <u-form-item label="标题" prop="price">
        <u-input v-model="form.name"/>
      </u-form-item>
      <u-form-item label="金额" prop="price">
        <u-input v-model="form.price"/>
      </u-form-item>

      <u-form-item label="单位" prop="channel">
        <u-input v-model="form.unitName" type="select" @click="channelShow=true"/>
      </u-form-item>

      <u-form-item label="备注" prop="remark">
        <u-input v-model="form.remark" type="textarea"/>
      </u-form-item>

    </u-form>

    <u-select v-model="channelShow" :list="listChannel" @confirm="onSelectChannel"></u-select>

    <button @click="submit">提交</button>

  </view>


</template>

<script>
import {
  categoryListApi,
  channelDeleteApi,
  channelListApi, goodsAddApi, goodsSelectByIdApi, goodsUpdateApi,
  outlayAddApi,
  outlayListApi,
  outlaySelectByIdApi, outlayUpdateApi
} from "@/network/api/api";
import {getUnitText, ShowToast} from "@/common/common";

export default {
  data() {
    return {
      fileList1: [],
      current: 0,
      selectCategory: 1,
      list: [],
      listChannel: [
        {label: '天', value: 0},
        {label: '周', value: 1},
        {label: '月', value: 2},
        {label: '年', value: 3},
      ],
      channelShow: false,
      form: {
        name: '',


        id: 0,
        img: "",
        price: 0,
        unit: 0,
        userName: "",

        /*返回的数据*/
        categoryName: "",
        createTime: "",
        unitName: "",

        /*上传的数据*/
        remark: ""
      },
      checkboxList1: [],
      radioList1: [],
      select1: {
        show: false,
        current: {},
        list: [{
          value: 1,
          label: '男'
        },
          {
            value: 2,
            label: '女'
          }
        ],
      },
      calendar1: {
        show: false,
      },
      rules: {
        amount: [
          {required: true, message: '请输入消费金额', trigger: ['change', 'blur']}
        ],
        birthday: [
          {required: true, message: '请选择日历', trigger: ['change', 'blur']}
        ],
        channel: [
          {required: true, message: '请选择账户', trigger: ['change', 'blur']}
        ],
        checkbox: [
          {type: "array", required: true, message: '请选择水果', trigger: ['blur']}
        ]
      },
      formId: {}
    };
  },
  computed: {
    chunkedItems() {
      const chunkSize = 10;
      const chunked = [];
      for (let i = 0; i < this.list.length; i += chunkSize) {
        chunked.push(this.list.slice(i, i + chunkSize));
      }
      return chunked;
    }
  },
  onLoad(e) {
    this.formId = e
    if (e.id === '-1') {
      console.log("添加")
    } else {
      console.log('修改')
      this.getData()
    }
  },
  onReady() {
    // this.$refs.form1.setRules(this.rules);
  },
  onShow() {
    //  this.$refs.form1.setRules(this.rules);
  },
  methods: {
    getData() {
      const _this = this;
      // 消费历史
      goodsSelectByIdApi(_this.formId).then(res => {
        if (res.code === 200) {
          Object.assign(_this.form, res.data[0])
          _this.form.unitName = getUnitText(res.data[0].unit);
          _this.fileList1 = [{url: '/api/file/img?name=' + res.data[0].img}];
        } else {
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onSelectChannel(arr) {
      console.log(arr)
      let current = arr[0];
      this.form.unit = current.value;
      this.form.unitName = current.label;
    },
    change(e) {
      this.current = e.detail.current;
    }, click(e) {
      console.log(e)
      this.form.categoryId = e
    },

    ShowTest() {

    },
    submit() {
      const _this = this;
      this.form.categoryPic = null
      if (this.formId.id !== '-1') {
        //修改
        goodsUpdateApi(this.form).then(res => {
          if (res.code === 200) {
            uni.showToast({
              type: 'success',
              title: res.message
            })
            uni.navigateBack(-1);
            // uni.switchTab({url: "/pages/tabbar/lease/lease"})
          } else {

          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        //添加
        goodsAddApi(this.form).then(res => {
          console.log(res)
          if (res.code === 200) {
            console.log(res)
            uni.showToast({
              type: 'success',
              title: res.message
            })
            uni.navigateBack(-1);
          } else {

          }
        }).catch(err => {
          console.log(err)
        })
      }


    },
    onCalendar1(e) {
      this.form.birthday = e.result;
    },
    // 删除图片
    deletePic(event) {
      console.log("删除图片")
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    onUploaded(event) {
      console.log(event[0].response.data)
      console.log("新增图片")
      this.form.img = event[0].response.data
    }, // 删除
    remove() {
      this.form.img = ''
    }
  }
};
</script>
<style scoped lang="scss">

.cate-item {
  &.selectCategory {
    //background-color: #dadada !important;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    //-ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    //filter: gray;
  }
}

.grid-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: $u-type-info;
}

.swiper {
  height: 280rpx;
}

.indicator-dots {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.indicator-dots-item {
  background-color: $u-tips-color;
  height: 6px;
  width: 6px;
  border-radius: 10px;
  margin: 0 3px;
}

.indicator-dots-active {
  background-color: $u-type-primary;
}
</style>